<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>在线的代码着色器</title>
		<link rel="icon" type="image/ico" href="favicon.ico">
		<link rel="stylesheet" href="/static/files/style.css" type="text/css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
	</head>

	<body>

		{% block scripts %}
		{% endblock %}

		<a name="top" style="display: none;">==Top==</a>

		<div id="container">
			<div id="top">
				<div class="top_inner">
					<div id="logo">
						<a href="/">codedrawer</a>
					</div>
					<div id="login_div">
						一个开源的在线代码着色工具
						{% if logged %} 欢迎 {{ user.name }}～ | <a href = "{{user.logouturl}}">退出</a>{% endif %}
					</div>
					<!--div id="tabs_main_div">						<ul class="tabs_main_list">							<li >								<a class="inactive_tab" href="/">原始代码</a>							</li>							<li >
								<a class="inactive_tab" href="/">着色配置</a>							</li>							<li >
								<a class="inactive_tab" href="/">HTML代码</a>							</li>						</ul>					</div-->
				</div> <!-- end #top block -->
			</div>

			<div id="middle">
				<div id="middle_div">
					<b class="edge_left"> </b>
					<b class="edge_right"> </b>

					<div id="middle_div_center_div">
						<ul class="middle_div_center_list">
							<li class="middle_div_center_list_show_line_number" id="middle_div_center_list_show_line_number">
								<div class="inactiveSubNav">
									<a class="mark" style="display: none;">inactive</a>
									<b class="edge_left_hover_tab_item">
									</b>
									<b class="edge_right_hover_tab_item">
									</b>
									<a href="javascript:void(0);">显示行号</a>
								</div>
							</li>
							<li class="middle_div_center_list_realtime active_subnav lastItem" id="middle_div_center_list_realtime"> <!-- active_subnav -->
								<div class="activeSubNav">
									<a class="mark" style="display: none;">active</a>
									<b class="edge_left_hover_tab_item_selected">
									</b>
									<b class="edge_right_hover_tab_item_selected">
									</b>
									<a href="javascript:void(0);">实时着色</a>
								</div>
							</li>
						</ul>
						<div class="hr">
							<hr>
						</div>
						<script type="text/javascript">
							function ifrealtime(){
								return($('.middle_div_center_list').children('.middle_div_center_list_realtime').children("div").children("a[class=mark]").html() == 'active');
							}
							function ifshowlinenumber(){
								return($('.middle_div_center_list').children('.middle_div_center_list_show_line_number').children("div").children("a[class=mark]").html() == 'active');
							}
						</script>
						
						
					</div> <!-- id="middle_div_center_div" -->
				</div> <!-- id="middle_div" -->


				<!--a class="verifyrealtime" href="javascript:void(0);">是否实时显示</a>
				<a class="verifylinenumber" href="javascript:void(0);">是否显示行号</a>
				
				<script type="text/javascript">
				
					$(document).ready(function(){
						$('.verifyrealtime').click(function(e){
							alert(ifrealtime());
						});
						$('.verifylinenumber').click(function(e){
							alert(ifshowlinenumber());
						});
					});
				</script-->

				<div class="cms_page_body">
					<div class="cms_titled_item">
						<h3>代码着色器</h3>
						<p>请在蓝色条目的最右侧配置渲染选项 可以选择『实时着色』『显示行号』等选项……</p>
						<div class="block_div">
							{% block block_div %}
							{% endblock %}
						</div>
					<p></p>
					</div> <!-- class="cms_titled_item" -->
				</div> <!-- class="cms_page_body" -->

			</div> <!-- end middle block -->

			<div id="bottom">
				<div class="footer_links_div">
					<div class="copyright_div">© 2010 The Codedraer Team <!--sup><small>TM</small></sup--><br/>已通过 W3C HTML5 认证</div>
					<div class="footer_column">
						<h2>codedraer</h2>
						<ul>
							<li><a href="http://lab.latest.codedrawer.appspot.com/help">帮助</a></li>
							<li><a href="http://code.google.com/p/codedrawer/">项目托管地址</a></li>
							<li class="lastItem"><a href="http://lab.latest.codedrawer.appspot.com/about">关于</a></li>
						</ul>
					</div>
					<div class="footer_column">
						<h2>信息</h2>
						<ul>
							<li>
								<a href="">博客</a>
							</li>
							<li class="lastItem">
								<a href="">微博</a>
							</li>
						</ul>
					</div>
					<div class="footer_column">
						<h2>联系</h2>
						<ul>
							<li class="lastItem">
								<a href="mailto:">联系作者</a>
							</li>
						</ul>
					</div>
					<div class="footer_column">
						<h2>跳转</h2>
						<ul>
							<li class="lastItem">
								<a href="#top">^ 回顶部</a>
							</li>
						</ul>
					</div>
					<div class="hr">
						<hr>
					</div>
				</div><!-- end #footer_links_div block -->
			</div> <!-- end #bottom block -->
		</div> <!-- end #container block -->

		<script type="text/javascript">
		//<![CDATA[
			$(function() {
				$('li:last-child').addClass('lastItem');

				$('.middle_div_center_list li[class!=active_subnav]').hover(
					function(e){ // 鼠标悬停
						$(this).addClass('middle_divHoverbble')
					}, function(e) { // 鼠标移出
						$(this).removeClass('middle_divHoverbble')
					})
				$('.middle_div_center_list li').click(
					function(e){
						if ($(this).children("div").children("a[class=mark]").html() == 'inactive'){
							$(this).children("div").removeClass('inactiveSubNav').addClass('activeSubNav');
							$(this).children("div").children("b[class=edge_left_hover_tab_item]").removeClass('edge_left_hover_tab_item').addClass('edge_left_hover_tab_item_selected');
							$(this).children("div").children("b[class=edge_right_hover_tab_item]").removeClass('edge_right_hover_tab_item').addClass('edge_right_hover_tab_item_selected');
							$(this).children("div").children("a[class=mark]").html('active')
						} else {
							$(this).children("div").removeClass('activeSubNav').addClass('inactiveSubNav');
							$(this).children("div").children("b[class=edge_left_hover_tab_item_selected]").removeClass('edge_left_hover_tab_item_selected').addClass('edge_left_hover_tab_item');
							$(this).children("div").children("b[class=edge_right_hover_tab_item_selected]").removeClass('edge_right_hover_tab_item_selected').addClass('edge_right_hover_tab_item');
							$(this).children("div").children("a[class=mark]").html('inactive')
						}
						
					})
			})
		//]]>
		</script>

	</body>
</html>

